<template>
  <Tab @goBack="goBack" :tabs="tabs" :current="current">
    <div slot="index">
      <el-form :inline="true" label-width="80px">

        <el-form-item label="上/下架">
          <el-select @keyup.enter.native="handleQuery" v-model="queryParams.status" placeholder="不限" clearable
                     size="small">
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>


        <el-form-item label="课程类型">
          <el-select @keyup.enter.native="handleQuery" v-model="queryParams.free" placeholder="不限" clearable
                     size="small">
            <el-option
              v-for="dict in freeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button type="success" size="mini" @click="handleInsert" v-hasPermi="['college:courseLecturer:add']">添加
          </el-button>
        </el-form-item>
      </el-form>

      <el-table v-loading="loading" :data="postList">
        <el-table-column label="封面" align="center">
          <template slot-scope="scope">
            <div>
              <el-popover placement="right" title="" trigger="click">
                <img :src="scope.row.coverpath" alt="">
                <img slot="reference" :src="scope.row.coverpath" alt="" style="max-height: 50px;max-width: 50px">
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="课程名称" align="center" prop="coursename"/>
        <el-table-column label="原价" align="center" prop="costamount">
          <template slot-scope="scope">
            <span>{{scope.row.costamount|currencyFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="现价" align="center" prop="amount">
          <template slot-scope="scope">
            <span>{{scope.row.amount|currencyFilter }}</span>
          </template>
        </el-table-column>
        <el-table-column label="播放次数" align="center" prop="playnumber"/>
        <!--<el-table-column label="讲师" align="center" prop="lecturer">
          <template slot-scope="scope">
            <span v-if="scope.row.lecturer">{{scope.row.lecturer}}</span>
            <span class="text-warning" v-else>暂无</span>
          </template>
        </el-table-column>-->
        <el-table-column label="课程介绍" align="center" prop="describe" :show-tooltip-when-overflow="true"/>
        <el-table-column label="总集数" align="center" prop="coursenum">
          <template slot-scope="scope">
            <el-link type="primary" @click.native="handleOption(scope.row)">
              <span>{{ scope.row.coursenum }}</span>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="免费集数" align="center" prop="freecoursenum">
          <template slot-scope="scope">
            <el-link type="primary" @click.native="handleOption(scope.row)">
              <span>{{ scope.row.freecoursenum }}</span>
            </el-link>
          </template>
        </el-table-column>
        <el-table-column label="是否免费" align="center" prop="free" :formatter="typeFormat">
          <template slot-scope="scope">
            <span class="text-warning" v-if="scope.row.free===0">免费</span>
            <span class="text-navy" v-else>收费</span>
          </template>
        </el-table-column>
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            <span class="text-navy" v-if="scope.row.courseType.name==='好课推荐'">{{scope.row.courseType.name}}</span>
            <span v-else>{{scope.row.courseType.name}}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" prop="status" :formatter="typeFormat">
          <template slot-scope="scope">
            <span v-if="scope.row.status===0">下架</span>
            <span class="text-navy" v-else-if="scope.row.status===1">上架</span>
            <span class="text-danger" v-else>删除</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center" prop="createtime" width="180" :show-tooltip-when-overflow="true"/>
        <el-table-column label="操作" align="center" width="300">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleRecommend(scope.row)"
              v-hasPermi="['college:courseLecturer:edit']"
            >推荐
            </el-button>
            <el-button
              size="mini"
              type="primary"
              @click="handleLine(scope.row)"
              v-hasPermi="['college:courseLecturer:edit']"
              v-if="scope.row.status===0"
            >上架
            </el-button>
            <el-button
              size="mini"
              type="warning"
              @click="handleLine(scope.row)"
              v-hasPermi="['college:courseLecturer:edit']"
              v-if="scope.row.status===1"
            >下架
            </el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['college:courseLecturer:edit']"
            >编辑
            </el-button>

            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              v-hasPermi="['college:courseLecturer:edit']"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <div slot="add">
      <Add :row="row" @goBack="goBack"></Add>
    </div>
    <div slot="voption">
      <vOption @goBack="goBack"></vOption>
    </div>
  </Tab>

</template>

<script>
  import {listCourse, removeCourse, lineCourse, courseType} from "@/api/college/course";
  import Add from "./add";
  import VOption from "./voption";
  import Tab from "@/components/Tab";

  export default {
    components: {Add, Tab, VOption},
    data() {
      return {
        current: 'index',
        row: undefined,
        open: false,
        courseLabels: undefined,
        courseTypes: undefined,
        loading: false,
        postList: [],
        title: '',
        total: 0,
        freeOptions: [{"dictLabel": "收费", "dictValue": "1"}, {"dictLabel": "免费", "dictValue": "0"}],
        statusOptions: [{"dictLabel": "上架", "dictValue": "1"}, {
          "dictLabel": "下架",
          "dictValue": "0"
        }/*, {"dictLabel": "删除", "dictValue": "2"}*/],
        tabs: [
          {index: 'index', name: ''}, {'index': 'add', name: '新增'}, {index: 'voption', name: '附件列表'}
        ],
        queryParams: {
          pageNum: 0,
          pageSize: 10,
          recommend: undefined,
          nickname: undefined
        }
      }
    },
    created() {
      courseType().then(response => {
        this.courseLabels = response.data.courseLabels;
        this.courseTypes = response.data.courseTypes;
      });
      this.getList();
    },
    methods: {
      handleDelete(row) {
        let _this = this;
        this.$confirm(`确定要删除课程名称为[${row.coursename}]的记录?删除将找不回此记录.`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          removeCourse(row.id).then(response => {
            _this.msgSuccess("删除成功");
            _this.getList();
          });
        }).catch(function (e) {
          console.log(e);
        });
      },
      typeFormat(row, column) {
        let option;
        if (column.property === 'free') {
          option = this.freeOptions;
        } else if (column.property === 'status') {
          option = this.statusOptions;
        }
        return this.selectDictLabel(option, row[column.property]);
      },
      getList() {
        this.loading = true;
        listCourse(this.queryDateRange(this.queryParams, this.daterange)).then(response => {
          this.postList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleInsert() {
        this.row = undefined;
        this.$set(this.tabs, 1, {index: 'add', name: '新增课程'});
        this.current = 'add';
      },
      handleUpdate(row) {
        this.row = row;
        this.$set(this.tabs, 1, {index: 'add', name: '编辑课程'});
        this.current = 'add';
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      goBack() {
        this.current = 'index';
        this.getList();
      },
      handleLine(row) {
        let _this = this;
        let str = row.status === 1 ? '下架' : '上架';
        this.$confirm(`确定要更改课程名称为[${row.coursename}]的状态为${str}?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: row.status === 1 ? "warning" : "info"
        }).then(function () {
          lineCourse({id: row.id, status: row.status === 1 ? 0 : 1}).then(res => {
            _this.msgSuccess(`${str}成功`);
            _this.getList();
          });
        }).catch(function (e) {
          console.log(e);
        });
      },
      handleRecommend(row) {
        let name;
        let typeId;
        let remark;
        for (let i = 0; i < this.courseTypes.length; i++) {
          if (row.courseType.id !== this.courseTypes[i].id) {
            name = this.courseTypes[i].name;
            typeId = this.courseTypes[i].id;
            remark = name === '好课推荐';
            break;
          }
        }
        let _this = this;
        this.$confirm(`确定要更改课件名为[${row.coursename}]的类型为${name}?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "info"
        }).then(function () {
          lineCourse({id: row.id, typeId: typeId}).then(res => {
            _this.msgSuccess('更改类型成功');
            _this.getList();
          });
        }).catch(function (e) {
          console.log(e);
        });
      },
      handleOption() {
        this.current = 'voption';
      }
    }
  }
</script>

<style>

</style>
